<template>
  <div v-if="permissionsLists(34)">
    <page-header :title="$t('m.Station_Station_details')">
      <el-button
        type="primary"
        :disabled="details.state != 1"
        v-if="permissionsLists(238)
        "
        @click="setWifi('1')"
      >
        {{ $t('m.Wifi_config') }}
      </el-button>
      <el-button
        type="primary"
        v-if="
          (details.state == 1 || details.state == 3) && permissionsLists(36)
        "
        @click="dialogClick(3, '')"
      >
        {{ $t('m.Station_Ejectall') }}
      </el-button>
      <el-button
        type="primary"
        v-if="
          (details.state == 1 || details.state == 3) && permissionsLists(176)
        "
        @click="dialogClick(4, $event)"
      >
        {{ $t('m.Station_refreshBattery') }}
      </el-button>
      <el-button
        type="primary"
        v-if="permissionsLists(35)"
        @click="dialogClick(details.customizeState == 1 ? 1 : 2, '')"
      >
        {{
          details.customizeState == 1
            ? $t('m.Station_LockStatus_Lock')
            : $t('m.Station_List_Unlock')
        }}
      </el-button>
    </page-header>
    <div class="container" style="margin-top:0">
      <div class="detail_div ">
        <div class="detail_left">
          <div class="detail_left_div">
            <div class="detail_title">
              <div style=" display: flex;align-items: center;">
                <span style="font-size: 16px;">{{
                  $t('m.Station_Stationinformation')
                }}</span>
                <div
                  class="detail_state"
                  :style="details.state | valFormat(stateOption1, 1)"
                >
                  <span
                    class="detail_state_dot"
                    :style="details.state | valFormat(stateOption2, 1)"
                  ></span>
                  <span class="detail_state_text">{{
                    details.state | valFormat(stateOption1)
                  }}</span>
                </div>
              </div>
            </div>
            <div class="detail_text">
              <el-image
                style="width: 85px; height: 85px"
                :src="cabinetNo"
                :preview-src-list="[cabinetNo]"
              >
              </el-image>
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Station_SN') }}: </span>
              <span class="detail_text2">{{
                details.cabinetNo | strFormat
              }}</span>
            </div>
            <div class="detail_text">
              <span>{{ $t('m.invite_Type') }}: </span>
              <span class="detail_text2">{{
                details.isScreen | stateFormat(options4) | strFormat
              }}</span>
            </div>
            <div class="detail_text">
              <span>IMEI: </span>
              <span class="detail_text2">{{ details.imei | strFormat }}</span>
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Station_List_Firmware_verison') }}: </span>
              <span class="detail_text2">{{
                details.firmwareVersion | strFormat
              }}</span>
            </div>
            <!-- <div class="detail_text">
              <span>{{ $t('m.Slots') }}: </span>
              <span class="detail_text2">{{
                details.productModel | strFormat
              }}</span>
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Module') }}: </span>
              <span class="detail_text2">{{
                details.moduleModel | strFormat
              }}</span>
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Network') }}: </span>
              <span class="detail_text2">{{
                details.signalType | strFormat
              }}</span>
            </div> -->
            <div class="detail_text">
              <span>{{ $t('m.Signal') }}: </span>
              <span class="detail_text2">{{
                $format.signalFormat(details.signal) | strFormat
              }}</span>
            </div>
            <div class="detail_text">
              <span>ICCID: </span>
              <span class="detail_text2">{{ details.sim | strFormat }}</span>
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Last_online_date') }}: </span>
              <span class="detail_text2">{{
                details.lastOnlineTime | dateformat
              }}</span>
            </div>
            <div class="detail_text">
              <span>{{ $t('m.branch_Creationdate') }}: </span>
              <span class="detail_text2">{{
                details.createTime | dateformat
              }}</span>
            </div>
          </div>
        </div>
        <div class="detail_right">
          <div class="detail_left_div">
            <div class="detail_title">
              {{ $t('m.Wifi_config_detail') }}
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Wifi_name') }}: </span>
              <span class="detail_text2">{{
                wifiForm.ssid | strFormat
              }}</span>
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Password') }}: </span>
              <span class="detail_text2">{{
                wifiForm.password | strFormat
              }}</span>
            </div>
          </div>
          <div class="detail_left_div">
            <div class="detail_title">
              {{ $t('m.Station_Binding_information') }}
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Agency_Details_Shop2') }}: </span>
              <span class="detail_text2">{{
                details.branchName | strFormat
              }}</span>
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Person_In_charge') }}: </span>
              <span class="detail_text2">{{
                details.branchPrincipal | strFormat
              }}</span>
            </div>
            <div class="detail_text">
              <span>{{ $t('m.branch_Phone_No') }}: </span>
              <span class="detail_text2">{{
                details.branchPhone
                  | phoneFormat(details.branchCode)
                  | strFormat
              }}</span>
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Shop_Details_Address') }}: </span>
              <span class="detail_text2">{{
                details.branchAddress | strFormat
              }}</span>
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Shop_Details_Profit_allocation') }}: </span>
              <span class="detail_text2"
                >{{ details.branchRatio
                }}{{
                  details.branchRatio && details.branchRatio >= 0 ? '%' : '--'
                }}</span
              >
            </div>

            <div class="detail_text" style="margin-top:20px;">
              <span>{{ $t('m.Franchisee_belong') }}: </span>
              <span class="detail_text2">{{
                details.agentName | strFormat
              }}</span>
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Person_In_charge') }}: </span>
              <span class="detail_text2">{{
                details.agentPrincipal | strFormat
              }}</span>
            </div>
            <div class="detail_text">
              <span>{{ $t('m.branch_Phone_No') }}: </span>
              <span class="detail_text2">{{
                details.agentPhone | phoneFormat(details.agentCode) | strFormat
              }}</span>
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Agency_Details_Region') }}: </span>
              <span class="detail_text2">{{
                details.agentAddress | strFormat
              }}</span>
            </div>
            <div class="detail_text">
              <span>{{ $t('m.Shop_Details_Profit_allocation') }}: </span>
              <span class="detail_text2"
                >{{ details.agentRatio
                }}{{
                  details.agentRatio && details.agentRatio >= 0 ? '%' : '--'
                }}</span
              >
            </div>
          </div>
        </div>
      </div>

      <div class="detail_div" style="margin-top:0;">
        <div class="detail_left" style="width:100%;margin-right:0">
          <div class="detail_left_div" style="padding-bottom:20px">
            <div class="detail_title">{{ $t('m.Slots_msg') }}</div>
            <div class="el_table_div" style="padding: 0px;">
              <el-table :data="details.posPbList" max-height="500">
                <el-table-column
                  :label="$t('m.Order_slotNoNum')"
                  prop="pos"
                  min-width="140"
                >
                </el-table-column>
                <el-table-column
                  prop="id"
                  :label="$t('m.Order_List_Powerbank')"
                  min-width="100"
                >
                  <template slot-scope="scope">
                    <div>
                      {{ scope.row.pbNo | strFormat }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="useNum"
                  :label="$t('m.Station_Usage_frequency')"
                  min-width="100"
                >
                  <template slot-scope="scope">
                    <div>
                      {{ scope.row.useNum | strFormat }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="cumulativeChargeCount"
                  :label="$t('m.Accumulated_charging')"
                  min-width="100"
                >
                  <template slot-scope="scope">
                    <div>
                      {{ scope.row.cumulativeChargeCount | strFormat }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="damageNum"
                  :label="$t('m.Station_Faulty')"
                  min-width="100"
                >
                  <template slot-scope="scope">
                    <div>
                      {{ scope.row.damageNum | strFormat }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="isAbnormal"
                  :label="$t('m.Exception_alerts')"
                  min-width="100"
                >
                  <template slot-scope="scope">
                    <div>
                      {{
                        scope.row.isAbnormal | stateFormat(options3) | strFormat
                      }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="state"
                  :label="$t('m.status')"
                  min-width="100"
                >
                  <template slot-scope="scope">
                    <div>
                      {{ scope.row.state | stateFormat(options1) | strFormat }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  fixed="right"
                  :label="$t('m.Users_Details_Operation')"
                  min-width="104"
                  v-if="isArrayEqual([44, 180, 182], permissionsLists)"
                >
                  <template slot-scope="scope">
                    <el-dropdown placement="bottom">
                      <img
                        src="@/assets/imgs/ic_operation.svg"
                        alt=""
                        class="dropdown_img"
                      />
                      <el-dropdown-menu
                        slot="dropdown"
                        style="white-space: nowrap !important;"
                      >
                        <el-dropdown-item
                          @click.native="
                            $router.push({
                              path: '/device/powerbank/detail',
                              query: {
                                id: scope.row.id
                              }
                            })
                          "
                          v-if="scope.row.id && permissionsLists(44)"
                          >{{ $t('m.Details') }}</el-dropdown-item
                        >
                        <el-dropdown-item
                          @click.native="powerClick(2, scope.row)"
                          v-if="permissionsLists(182)"
                          :disabled="
                            scope.row.state == 0 ||
                              scope.row.state == 1 ||
                              scope.row.state == 6 ||
                              !scope.row.id
                          "
                          >{{ $t('m.initialize') }}</el-dropdown-item
                        >
                        <el-dropdown-item
                          @click.native="powerClick(3, scope.row)"
                          v-if="scope.row.state != 4 && permissionsLists(180)"
                          >{{ $t('m.Station_eject') }}</el-dropdown-item
                        >
                      </el-dropdown-menu>
                    </el-dropdown>
                  </template>
                </el-table-column>
                <emptydata
                  slot="empty"
                  v-if="!details.posPbList || details.posPbList.length == 0"
                />
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 机柜锁定、解锁、一键全弹、刷新 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="operateDialog"
      :title="dialogType | stateFormat(optionsTitle)"
      width="520px"
      top="200px"
      append-to-body
    >
      <div class="dialog_content">
        <div class="dialog_content1">
          {{ dialogType | stateFormat(optionsText) }}
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="operateDialog = false" class="cancel_btn">{{
          $t('m.cancel')
        }}</el-button>
        <el-button @click="changeStation" class="cancel_btn confirm_btn">{{
          $t('m.confirm_')
        }}</el-button>
      </span>
    </el-dialog>

    <!-- 充电宝刷新/恢复/弹出 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="rechargeDialog"
      :title="rechargeType | stateFormat(rechargeTitle)"
      width="520px"
      top="200px"
      append-to-body
    >
      <div class="dialog_content">
        <div class="dialog_content1">
          {{ rechargeType | stateFormat(rechargeText) }}
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="rechargeDialog = false" class="cancel_btn">{{
          $t('m.cancel')
        }}</el-button>
        <el-button @click="changePower" class="cancel_btn confirm_btn">{{
          $t('m.confirm_')
        }}</el-button>
      </span>
    </el-dialog>

    <!-- wifi配置 -->
    <el-dialog
      :title="$t('m.Wifi_config')"
      :visible.sync="dialogWifi"
      :close-on-click-modal="false"
      width="520px"
    >
      <div class="dialog_content">
        <el-form ref="wifiForm" :model="wifiForm" :rules="rulesForm">
          <div class="dialog_content1">
            {{ $t('m.Wifi_name') }}
          </div>
          <div class="dialog_content1" style="padding-bottom:0;">
            <el-form-item class="establish_item" prop="ssid" style="width:100%">
              <el-input
                v-model="wifiForm.ssid"
                clearable
                :maxlength="32"
                :placeholder="$t('m.Please_enter')"
              ></el-input>
            </el-form-item>
          </div>
          <div class="dialog_content1">
            {{ $t('m.Password') }}
            <div
              style="padding-top:4px; font-size: 12px;font-weight: 400;text-align: left;color: #646b80;line-height: 16px;"
            >
              *{{ $t('m.Wifi_password_tip') }}
            </div>
          </div>
          <div class="dialog_content1" style="padding-bottom:0;">
            <el-form-item
              class="establish_item"
              prop="password"
              style="width:100%"
            >
              <el-input
                v-model="wifiForm.password"
                clearable
                :maxlength="63"
                :minlength="6"
                :placeholder="$t('m.Please_enter')"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
        <el-button
          type="text"
          style="cursor: pointer; text-decoration: underline;  color: var(--text-color);"
          @click="wifiReset"
          >{{ $t('m.Wifi_password_initial') }}</el-button
        >
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="wifiConfirm"
          class="cancel_btn confirm_btn"
          >{{ $t('m.Wifi_save') }}</el-button
        >
      </div>
    </el-dialog>    
  </div>
</template>

<script>
export default {
  data () {
    return {
      stateOption1: [
        {
          value: 1,
          label: this.$t('m.Station_Status_On'),
          color: 'background: #e6fbee;'
        },
        {
          value: 0,
          label: this.$t('m.Station_Status_Off'),
          color: 'background: #ffe8e8;'
        }
      ],
      stateOption2: [
        {
          value: 1,
          color: 'background: #4CE48A;'
        },
        {
          value: 0,
          color: 'background: #FF605A;'
        }
      ],
      options1: [
        {
          value: '',
          label: this.$t('m.all')
        },
        {
          value: 0,
          label: this.$t('m.Station_untapped')
        },
        {
          value: 1,
          label: this.$t('m.Order_Status_Renting')
        },
        {
          value: 2,
          label: this.$t('m.Station_Damaged')
        },
        // {
        //   value: 3,
        //   label: '已报失'
        // },
        {
          value: 4,
          label: this.$t('m.Station_eject2')
        },
        {
          value: 5,
          label: this.$t('m.Station_Sold')
        },
        {
          value: 6,
          label: this.$t('m.Inventory')
        }
      ],
      options3: [
        {
          value: 1,
          label: this.$t('m.Station_List_Distribution_Yes')
        },
        {
          value: 0,
          label: this.$t('m.Station_List_Distribution_No')
        }
      ],
      options4: [
        {
          value: '',
          label: this.$t('m.all')
        },
        {
          value: 1,
          label: this.$t('m.Advertising_screen')
        },
        {
          value: 0,
          label: this.$t('m.Without_screen')
        }
      ],
      optionsTitle: [
        {
          value: 1,
          label: this.$t('m.Lockingcabinets')
        },
        {
          value: 2,
          label: this.$t('m.Station_List_Unlock')
        },
        {
          value: 3,
          label: this.$t('m.Station_Ejectall')
        },
        {
          value: 4,
          label: this.$t('m.Station_refreshBattery')
        },
        {
          value: 5,
          label: this.$t('m.delete')
        }
      ],
      optionsText: [
        {
          value: 1,
          label: this.$t('m.Station_switch')
        },
        {
          value: 2,
          label: this.$t('m.Station_unlock')
        },
        {
          value: 3,
          label: this.$t('m.Station_dispose')
        },
        {
          value: 4,
          label: this.$t('m.Station_Confirm_to')
        },
        {
          value: 5,
          label: '您确认将该机柜从系统中删除吗？'
        }
      ],
      rechargeTitle: [
        {
          value: 1,
          label: this.$t('m.Station_refreshBattery')
        },
        {
          value: 2,
          label: this.$t('m.initialize')
        },
        {
          value: 3,
          label: this.$t('m.Station_eject')
        }
      ],
      rechargeText: [
        {
          value: 1,
          label: this.$t('m.Station_Confirm_to')
        },
        {
          value: 2,
          label: this.$t('m.Station_reactivate_power')
        },
        {
          value: 3,
          label: this.$t('m.Station_eject_power_bank')
        }
      ],
      operateDialog: false, //锁定、解锁、一键全弹、刷新弹窗
      rechargeDialog: false, //充电宝刷新/恢复/弹出
      rechargeType: '',
      powerRow: '',
      dialogType: '',
      details: '', //详情
      cabinetNo: '',
      permissionsIds: [],
      dialogWifi: false,
      wifiForm: {
        cabinetNo: '',
        password: '',
        ssid: ''
      },
      rulesForm: {
        ssid: [
          {
            required: true,
            message: this.$t('m.Wifi_name_enter'),
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: this.$t('m.Wifi_password_enter'),
            trigger: 'blur'
          },
          { min: 6, max: 63, message: this.$t('m.Wifi_password_length'), trigger: 'blur' }
        ]
      },
    }
  },
  created () {
    this.$store.state.permissions.forEach(item => {
      this.permissionsIds.push(Number(this.$jsencrypt.decrypt(item)))
    })
    if (!this.permissionsLists(34)) {
      return
    }
    this.getDetails()
    this.cabinetNo = this.scanaQRcode(
      this.conf['station-qr-code-prefix'] +
        'device/cabinet.html?sno=' +
        this.$route.query.cabinetNo
    )
  },
  mounted () {},
  methods: {
    //权限id校验
    permissionsLists (val) {
      return this.permissionsIds.includes(val)
    },
    //获取详情
    getDetails () {
      this.$api.equipment
        .getStationDtail(this.$route.query.cabinetNo)
        .then(res => {
          if (this.$ok(res)) {
            this.details = res.data
            this.setWifi('')
          }
        })
    },
    //锁定、解锁、一键全弹、刷新、删除
    dialogClick (e, event) {
      this.dialogType = e
      if (this.dialogType == 4) {
        this.changeStation()
      } else {
        this.operateDialog = true
      }
      if (event) {
        this.clickHandler(event)
      }
    },
    clickHandler (evt) {
      let target = evt.target
      if (target.nodeName == 'SPAN') {
        target = evt.target.parentNode
      }
      target.blur()
    },
    //操作按钮
    changeStation () {
      this.$openLoading()
      if (this.dialogType == 4) {
        this.stationRefresh()
      } else if (this.dialogType == 3) {
        this.stationEjectAll()
      } else {
        this.stationLock()
      }
    },
    //操作按钮结果
    getRes (res) {
      if (this.$ok(res)) {
        this.$message.success(res.message)
        this.getDetails()
        this.operateDialog = false
        this.rechargeDialog = false
        this.$closeLoading()
      } else {
        this.$message.error(res.message)
        this.$closeLoading()
      }
    },
    //刷新电量
    stationRefresh () {
      this.$api.equipment.stationRefresh(this.details.cabinetNo).then(res => {
        this.getRes(res)
      })
    },
    //一键全弹
    stationEjectAll () {
      this.$api.equipment.stationEjectAll(this.details.cabinetNo).then(res => {
        this.getRes(res)
      })
    },
    //锁定/解锁
    stationLock () {
      let params = {
        cabinetNo: this.details.cabinetNo,
        customizeState: this.dialogType == 1 ? 2 : 1
      }
      this.$api.equipment.stationLock(params).then(res => {
        this.getRes(res)
      })
    },
    //打开充电宝弹窗
    powerClick (sum, item) {
      this.powerRow = item
      this.rechargeType = sum
      this.rechargeDialog = true
    },
    //修改充电宝状态
    changePower () {
      this.$openLoading()
      if (this.rechargeType == 2) {
        this.initializePower()
      } else {
        this.ejectPower()
      }
    },
    //恢复充电宝
    initializePower () {
      this.$api.equipment.initializePower(this.powerRow.id).then(res => {
        this.getRes(res)
      })
    },
    //弹出充电宝
    ejectPower () {
      let params = {
        cabinetNo: this.details.cabinetNo,
        pos: this.powerRow.pos,
        powerBankId: this.powerRow.id
      }
      this.$api.equipment.ejectPower(params).then(res => {
        this.getRes(res)
      })
    },
    // 打开wifi设置
    setWifi (index) {
      if (this.details.state != 1) {
        return
      }
      this.$api.equipment.getWifiConfig(this.details.cabinetNo).then(res => {
        if (this.$ok(res)) {
          if (index) {
            this.dialogWifi = true
          }
          this.wifiForm.cabinetNo = this.details.cabinetNo
          this.wifiForm.ssid = res.data.wifiSsid
          this.wifiForm.password = res.data.wifiPassword
        } else {
          this.$message.error(res.message)
        }
      })
    },

    // 重置wifi
    wifiReset () {
      this.$api.equipment.resetWifiConfig(this.wifiForm.cabinetNo).then(res => {
        if (this.$ok(res)) {
          this.dialogWifi = false
          this.$message.success(res.message)
          this.setWifi('') 
        } else {
          this.$message.error(res.message)
        }
      })
    },

    // 保存wifi配置
    wifiConfirm () {
      this.$refs.wifiForm.validate(valid => {
        if (!valid) {
          return
        }
        this.$api.equipment.saveWifiConfig(this.wifiForm).then(res => {
          if (this.$ok(res)) {
            this.dialogWifi = false
            this.$message.success(res.message)
            this.setWifi('') 
          } else {
            this.$message.error(res.message)
          }
        })
      })
    },
  }
}
</script>
